<template>
    <div>
        <vxe-modal
        v-model="dialogVisible"
        title="列表配置"
        width="40%"
        height="600"
        :show-close="false" show-footer
    >
        <el-row>
            <el-col :span="8">
                <div class="cikbooy">
                    <div class="cikfill" v-show="item.fieldDispName!==''" v-for="(item,index) in data.selectfield" :key="index" @dblclick="cikfill(item)">{{ item.fieldDispName }}</div>
                </div>
            </el-col>
            <el-col :span="16">
                <vxe-table
                        border
                        size="mini"
                        ref="xTable"
                        height="480"
                        :loading="false"
                        :data="tableList"
                        :edit-config="{trigger: 'click', mode: 'row'}"
                    >
                      <vxe-column field="title" title="字段"></vxe-column>
                      <vxe-column field="v" title="填充字段" :edit-render="{}">
                        <template #default="{ row }">
                          <span>{{ row.v}}</span>
                        </template>
                        <template #edit="{ row }">
                          <vxe-select v-model="row.v" clearable transfer>
                            <vxe-option v-for="num in data.selectfield" :key="num.fieldDispName" :value="num.fieldDispName" :label="num.fieldDispName"></vxe-option>
                          </vxe-select>
                        </template>
                      </vxe-column>
                    </vxe-table>
            </el-col>
        </el-row>
      <template #footer>
        <el-button size="small" @click="handleClose">取消</el-button>
        <el-button size="small" type="success" @click="save">提交</el-button>
      </template>

    </vxe-modal>
    </div>
    
</template>
<script setup>
    import {ref,onMounted} from "vue"
    import XEUtils from "xe-utils"
    let dialogVisible = ref(true)
    let xTable = ref(null)
    const props = defineProps({
        data:{
            type:Object
        },
        MT:{
            type:Object
        },
        TBindex:{
            type:Number,
            required:false
        },
        model:{
            type:Object,
            required:true
        },
        Fname:{
            type:Object
        },values:{
            type:Object
        },
        TB:{
            type:Array,
            required:false
        }
    })
    const emits = defineEmits(["shutDown"])
    let tableList = ref([])
    onMounted(()=>{
      console.log(props.values)
        if(props.TBindex==null){
            tableList.value=props.MT
            tableList.value.forEach(element => {
              element['v']=null
             if (props.values!==undefined && props.values[element['fieldName']]!==undefined){
               element['v']=props.values[element['fieldName']] ['v']
             }

            });
        }else{
            props.TB[props.TBindex].column.forEach((item)=>{
                item['v']=null
              if (props.values!==undefined && props.values[item['fieldName']]!==undefined){
                item['v']=props.values[item['fieldName']] ['v']
              }
            })
            tableList.value=props.TB[props.TBindex].column
        }
    })
    const cancel = ()=>{
        emits('shutDown',false,'')
    }
    const handleClose=()=>{
        cancel()
    }
    const cikfill=(item) =>{
            let v = true
            console.log(item);
            xTable.value.reloadData(tableList.value.map((row, index) => {
                if(row.v==null&&v){
                    v = false
                    row.v=item.fieldDispName
                }
                return row
            }))
    }
    const save = ()=>{
        let data = {}
            xTable.value.getTableData().fullData.forEach(row => {
                if (row.v !== null) {
                    data[row.fieldName] = { v: row.v, t: row.v }
                }
        })
        console.log(data);
        emits('shutDown',false,data)
    }
</script>
<style scoped>
        .cikbooy{
        height: 100%;
        border: 1px solid #d2d2d2;
    }
.cikfill {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.771);
        line-height: 20px;
        padding: 5px;
        border-bottom: 1px solid #d2d2d2;
        cursor: pointer;
      }
      .fillb-bou {
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
  }
  .fillb-bou>div {
      font-size: 14px;
    }
</style>